Кастомные селекты с иконками и автодополнением

​​Кастомные селекты

Плохие новости: если вам понадобился селект с иконками, то либо вам, либо вашим пользователям придётся пострадать.

1️⃣ Что не так со стилизацией нативных селектов. Если коротко — стилизировать можно мало что, а кроссбраузерная поддержка отвратительная: The Current State of Styling Selects in 2019

2️⃣ Нюансы поведения селектов, к которым мы интуитивно привыкли (и которых в кастомных селектах обычно нет). Например, если ткнуть в <select> со странами и начать вводить название страны, то <select> выберет подходящую страну — даже если он закрыт: <select> your poison 3️⃣ Нюансы хорошего кастомного селекта (их куча). Например, для поддержки autofill в браузере нужно создавать скрытый <select>: тред автора Parcel

***

Хорошие новости: с этим можно что-то сделать.

1️⃣ Взять тег <datalist>. Если вам нужен просто селект с автодополнением, посмотрите на <input> с <datalist> — может быть, он решит проблему: datalist

2️⃣ Взять reach/listbox или reach/combobox. Reach UI — это набор компонентов от авторов react-router, который фокусируется на accessibility. Listbox работает как нативный <select>, а Combobox — как <input> с <datalist>; и оба хорошо кастомизируются: Listbox · Combobox

3️⃣ Следить за веб-платформой. Полгода назад команда Edge выяснила, что из всех нативных контролов селекты вызывают больше всего боли: Can we please style the <select> control?! После этого лёд тронулся — разработчики браузеров начали обсуждать, как улучшить нативные формы: WICG/open-ui